/*
 *
 * (c) Copyright Ascensio System Limited 2010-2023
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/


#customNavigationItems {
    .item-img {
        width: 32px;

        img {
            width: 16px;
            height: 16px;
            margin: 0 6px;
            background-color: transparent;
        }
    }

    .item-label div {
        max-width: 280px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .item-action {
        width: 32px;

        a {
            display: block;
            width: 16px;
            height: 16px;
            margin: 0 6px;
            background: url("../../../../skins/default/imagescss/icons_nav_panel.png") no-repeat 0 -390px;
        }
    }
}


#customNavigationItemDialog {
    .add-header {
        display: block;
    }

    .settings-header {
        display: none;
    }

    #removeBtn {
        display: none;
        float: right;
    }

    &.settings-mode {
        .add-header {
            display: none;
        }

        .settings-header {
            display: block;
        }

        #removeBtn {
            display: block;
        }
    }

    .textEdit {
        width: 346px;
    }

    input[type=checkbox] {
        margin: 2px 8px 0 0;
        float: left;
    }

    .header-base-small {
        margin-bottom: 6px;
    }

    .elements-container {
        margin-bottom: 24px;
    }

    .element-container {
        margin-bottom: 8px;
    }

    .image-container {
        float: left;
        width: 175px;
        height: 150px;

        img {
            display: block;
            margin-bottom: 8px;

            &#smallImg {
                width: 16px;
                height: 16px;
            }

            &#bigImg {
                width: 100px;
                height: 100px;
            }
        }
    }
}